<template lang="pug">
  .profile.pos-a.animated.bounceInLeft(v-if="panoInfo", :class="getRollfont ? 'has-notice' : 'no-notice'")
    .profile-wrap
      .logo(v-if="panoInfo.logo")
        div(@click='$vgo.emit("openPanoStore")' v-if="isZGViewPano")
          img.hand(:src="getLogoImg", alt="")
        div(v-else)
          img.hand(:src="getLogoImg", alt="" @click.stop="handleLogo")
      .author-extra
        p.author.omit(v-if="isShowAuthor && panoInfo.user_nickname")
          a(:href="AuthorUrl ? (AuthorUrl + panoInfo.user_id) : 'javascript:;'") 作者
            span  {{panoInfo.user_nickname}}

        .extra.omit(v-if="isShowPraise")
          .item
            span.icon 人气
              |  {{getFormatSeeCount}}
          //- .item
          //-   span.icon( @click="handleClick('praise')") 点赞
          //-     |  {{getPraiseCount}}
          //- .item(:class="{'active': getCollectStatus}")
          //-   span.icon(@click.natrue="handleClick('collect')") 收藏
          //-     i.iconfont &#xe6b3;
    Weather(v-if="isShowWeather")
</template>

<script>
import Weather from '@/components/Weather'
import { mapGetters } from 'vuex'
import { isMobile } from '@/utils'
import {
  visibleAuthor,
  visiblePraise,
  visibleWeather
} from '@/utils/krpano'

export default {
  data() {
    return {
      isZGViewPano: $globalconfig.MODULES.ZG_VIEW_PANO,
      homeUrl: $globalconfig.URLS.HOME,
      baseUrl: $globalconfig.URLS.API,
      AuthorUrl: $globalconfig.AuthorUrl,
      isCollection: false,
      countUnit: 10000
    }
  },
  mounted() {
    // 初始化获取收藏状态
    this.$nextTick(() => {
      setTimeout(() => {
        this.isCollection = !!this.collected
      }, 4000)
    })
  },
  computed: {
    ...mapGetters([
      'panoInfo',
      'panoId',
      'praiseCount',
      'logined',
      'collected',
      'praised',
      'userInfo'
    ]),
    getFormatSeeCount() {
      if(this.panoInfo) {
        return this.panoInfo.seecount > this.countUnit
          ? Number(this.panoInfo.seecount/this.countUnit).toFixed(1) + 'w'
          : this.panoInfo.seecount
      }
    },
    getLogoImg() {
      if(this.panoInfo && this.panoInfo.logo) {
        return this.baseUrl + this.panoInfo.logo.replace('s_', '')
      }
    },
    getRollfont() {
      if(this.panoInfo) {
        return this.panoInfo.rollfont
      }
    },
    getPraiseCount() {
      return this.praiseCount > this.countUnit
        ? Number(this.praiseCount/this.countUnit).toFixed(1) + 'w'
        : this.praiseCount
          ? this.praiseCount
          : 0
    },
    isShowAuthor() {
      return visibleAuthor()
    },
    isShowPraise() {
      return visiblePraise()
    },
    isShowWeather() {
      return visibleWeather()
    },
    getCollectStatus() {
      return this.collected
    },
    getMobile() {
      return isMobile()
    }
  },
  methods: {
    handleLogo() {
      if (this.panoInfo && this.panoInfo.logolink) {
        let url = this.panoInfo.logolink
        if (url.indexOf('www.') === 0) {
          url = `//${url}`
        }
        // console.log(url)
        window.open(url)
      }
    },
    handleClick(type) {
      if(!this.$AUTH.checkLogin()) return
      // 点赞
      if(type == 'praise') {
        let praiseCK = this.$AUTH.getCookie('praisecount')
        let userid = this.userInfo ? this.userInfo.user_id : 0

        let ckPanoId = praiseCK.split('|')[0]
        let ckUserId = praiseCK.split('|')[1]

        if(userid != ckUserId || this.panoId != ckPanoId) {
          this.$store.dispatch('addPraise')
        } else {
          this.$vgo.tip('今天已赞过了')
          return
        }
      }
      // 收藏
      if(type == 'collect') {
        this.isCollection = !this.isCollection
        this.$store.dispatch('addCollection')
      }
    }
  },
  components: {
    Weather
  }
}
</script>

<style lang="stylus">
$white = #fff
$active = #17fd35
.has-notice
  top: 30px
.no-notice
  top: 20px

.profile
  width: auto
  padding-left: 5px
  line-height: 24px
  color: $white
  box-sizing: border-box
  z-index: 10
  .profile-wrap
    z-index: 10
  a
    color: $white
  .logo
    margin: 5px 0
  .author-extra
    display flex
    .author
      padding: 0 5px
      max-width 100px
    .extra
      display: flex
      color: #fff
      max-width 100px
      .item
        display: inline-block
        &.active
          .icon i
            color: $active
      .icon
        cursor: pointer
        padding-left:4px
        i
          margin-left: 4px
          font-size: 14px
</style>
